<template>
  <!-- 内容主体开始 -->
  <div class="center">
    <!-- 头部图片开始 -->
    <div class="headImg"></div>
    <!-- 头部图片结束 -->
    <!-- 图片/文字介绍部分开始 -->
    <div class="imgWord">
      <!-- 头部轮播介绍部分开始 -->
      <div class="rotation">
        <el-carousel height="500px" indicator-position="outside">
          <el-carousel-item v-for="(item, index) in imgArray" :key="index">
            <div>
              <img :src="item.url" alt />
              <div class="rotationText">
                <div>
                  <span>{{ item.title }}</span>
                  <P>{{ item.word }}</P>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 头部轮播介绍部分结束 -->

      <!-- PET介绍部分开始 -->
      <div class="introducePet">
        <div>
          <span>{{ imgArray[1].title }}</span>
          <div>
            <p>{{imgArray[1].word}}</p>
            <img :src="imgArray[1].url" alt />
          </div>
        </div>
        <div>
          <div>
            <img :src="imgArray[3].url" alt />
            <p>{{imgArray[3].word}}</p>
          </div>
        </div>
      </div>
      <!-- PET介绍部分结束 -->
    </div>
    <!-- 图片/文字介绍部分结束 -->
  </div>
  <!-- 内容主体结束 -->
</template>

<style lang="less" scoped>
// 内容主体开始
.center {
  // 头部图片开始
  .headImg {
    width: 100%;
    height: 400px;
    background-image: url("../assets/images/矩形 2 拷贝3131.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  // 头部图片结束

  // 图片/文字介绍部分开始
  .imgWord {
    width: 60%;
    margin-left: 20%;
    margin-top: 40px;

    // 头部轮播介绍部分开始
    .rotation {
      width: 100%;
      height: 500px;
      position: relative;

      .el-carousel__button {
        background-color: #f6992b;
      }

      img {
        position: absolute;
        top: 10%;
        left: 10%;
        z-index: 2;
        height: 70%;
      }

      .rotationText {
        width: 70%;
        height: 90%;
        position: absolute;
        z-index: 1;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        background-color: #f8f8f8;

        div {
          width: 70%;
          height: 80%;
          margin-top: 5%;
          margin-left: 25%;

          span {
            font-size: 25px;
          }

          p {
            font-size: 13px;
            line-height: 30px;
            color: #c0c0c0;
          }
        }
      }
    }
    // 头部轮播介绍部分结束

    // PET介绍部分开始
    .introducePet {
      width: 100%;
      height: 1000px;
      position: relative;
      top: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      & > div {
        height: 500px;
        display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

        & > span {
          font-size: 30px;
        //   position: absolute;

        }

        & > div {
          width: 100%;
          height: 80%;
          display: flex;
          justify-content: space-around;
          align-items: center;

          p {
            width: 45%;
            height: 60%;
            font-size: 13px;
            color: #c0c0c0;
            line-height: 30px;
          }
        }
      }
    }
    // PET介绍部分结束
  }
  // 图片/文字介绍部分结束
}
// 内容主体结束
</style>

<script>
import imgArr_1 from "../assets/images/组 229.png";
import imgArr_2 from "../assets/images/520057061138424936.png";
import imgArr_3 from "../assets/images/16389946535785785.png";
import imgArr_4 from "../assets/images/组 260.png";
export default {
  data() {
    return {
      imgArray: [
        {
          url: imgArr_1,
          title: "WELCOME TO YOU",
          word:
            "Where we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is a Where we have always known that pets of the familyl! Zehuai is a Where we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is a",
        },
        {
          url: imgArr_2,
          title: "HOHOHOHOHO TO YOU",
          word:
            "Vue we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is a Where we have always known that pets of the familyl! Zehuai is a Where we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is a",
        },
        {
          url: imgArr_4,
          title: "RNG NB!!!!",
          word:
            "RNG NB we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is a Where we have always known that pets of the familyl! Zehuai is a Where we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is a",
        },
        {
          url: imgArr_3,
          title: "RNG NB!!!!",
          word:
            "RNG NB we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is a Where we have always known that pets of the familyl! Zehuai is a Where we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is aWhere we have always known that pets of the familyl! Zehuai is a",
        }
      ],
    };
  },
  created() {
    // 路由之间传值
    // this.array = this.$route.query
  },
};
</script>